<template>
	<w-container id="container">
		<!-- 自定义导航 -->
		<w-navbar id="navbarStyle"></w-navbar>
		<!-- 中心区域 -->
		<!-- <w-image src="/static/icon/logo-text.png" :width="206" :height="177" class="top-img"></w-image> -->
		<view class="login_center">
			<view class="font-size-22 font-w-500">欢迎登录{{ appConfig.appName }}</view>
			<view class="font-size-12" style="color: #929292;">欢迎来到{{ appConfig.appName }}</view>
			<!-- <w-image :src="logo" width="203" height="203"></w-image> -->
			<view class="loginInput mt-32">
				<view class="warp" style="width: 100%;">
					<!-- 		<view class="flex flex-ai-center">
						<w-icon name="logo_yunlv" size="24"></w-icon>
						<view class="font-w-500 font-size-16 ml-4">注册</view>
					</view> -->
					<!-- <w-image src="/static/bg/loginbg3.png" width="120" :height="47/2" class="mb-32"></w-image> -->
					<view class="iptStyle mt-10">
						<u-input v-model="form.mobile" type="number" :customStyle="iptStyle" clearable
							:placeholder="handleLang('请输入本人实名认证的手机号')" border="bottom" fontSize="14" :color="inputColor">
							<template #prefix>
								<view class="flex flex-ai-center">
									<view class="font-size-15 font-w-500">+86</view>
									<u-line direction="col" length="20" margin="0 20rpx" color="#D9D9D9"></u-line>
								</view>
							</template>
						</u-input>
						<u-line></u-line>
					</view>
					<view class="iptStyle mt-20">
						<u-input v-model="form.code" type="number" :customStyle="iptStyle" clearable
							:placeholder="handleLang('请输入验证码')" maxlength="6" border="bottom" fontSize="14"
							:color="inputColor">
							<view slot="prefix" style="width: 120rpx;font-weight: 500;">验证码 </view>
							<template slot="suffix">
								<u-code ref="uCode" @change="tips=$event" @start="isSend=false" @end="isSend=true"
									seconds="60" :changeText="handleLang('(重新发送 Xs)')" uniqueKey="register_page"
									keepRunning></u-code>
								<view @tap="checkVerifyStatus"
									:class="`font-size-12 ${isSend?'font-color-theme':'font-color-minor'}`">
									{{ handleLang(tips) }}
								</view>
							</template>
						</u-input>
						<u-line></u-line>
					</view>
					<view class="iptStyle mt-20">
						<u-input v-show="ispwd" :password="true" v-model="form.password" :customStyle="iptStyle"
							clearable :placeholder="handleLang('请设置密码')" border="bottom" fontSize="14"
							:color="inputColor">
							<view slot="prefix" style="width: 120rpx;font-weight: 500;">密 码 </view>
							<template slot="suffix" v-if="form.password">
								<w-icon name="eye-off" color="#909399" @click="ispwd=!ispwd" size="18"></w-icon>
							</template>
						</u-input>
						<u-input v-show="!ispwd" :password="false" v-model="form.password" :customStyle="iptStyle"
							clearable :placeholder="handleLang('请设置密码')" border="bottom" fontSize="14"
							:color="inputColor">
							<view slot="prefix" style="width: 120rpx;font-weight: 500;">密 码 </view>
							<template slot="suffix" v-if="form.password">
								<w-icon name="eye-fill" color="#909399" @click="ispwd=!ispwd" size="18"></w-icon>
							</template>
						</u-input>
						<u-line></u-line>
					</view>
					<view class="iptStyle mt-20">
						<u-input v-model="form.inviter_code" type="text" :customStyle="iptStyle" clearable
							:placeholder="handleLang('请输入邀请码（选填）')" border="bottom" fontSize="14" :color="inputColor">
							<view slot="prefix" style="width: 120rpx;font-weight: 500;">邀请码 </view>
						</u-input>
						<u-line></u-line>
					</view>					
					<!-- <view class="hint">{{handleLang('密码内需同时包含数字、字母，长度在6-12之间')}}</view> -->
					<w-button class="login_btn" type="colorful" shape="circle"
						@click="$u.throttle(registerChange, 500)">{{handleLang('立即注册')}}</w-button>
					<view class="agreement mt-24">
						<w-agreement v-model="checked">
							<template>
								{{handleLang('我已阅读并同意')}}

								<text class="font-color-theme"
									@tap.stop="toWebview('/index/index/usageterms','用户服务协议')">{{handleLang('《用户服务协议》')}}</text>
								<text class="font-color-theme"
									@tap.stop="toWebview('/index/index/agreement','隐私政策')">{{handleLang('《隐私政策》')}}</text>
								<!-- 和
								<text class="font-color-textPrimary" @tap.stop="toWebview('/index/index/zhihuangagreement','置换协议')">《置换协议》</text> -->
							</template>
						</w-agreement>
						<u-safe-bottom></u-safe-bottom>
					</view>
					<!-- <u-gap height="120"></u-gap>
					<view class="register_btn font-color-theme" @click="goLogin">
						{{handleLang('去登录')}} 
					</view> -->
				</view>
			</view>
		</view>
		<!-- 底部协议 -->


		<w-jy-verify ref="captcha" v-if="captchaStatus" @success='getCode'></w-jy-verify>
	</w-container>
</template>

<script>
	import {
		sendSms,
		register
	} from '@/api/user/index.js';
	import {
		mapActions,
		mapState
	} from 'vuex';
	import {
		TokenKey
	} from '@/config'
	export default {
		data() {
			return {
				checked: false, //  协议勾选
				isSend: true, //  验证码状态
				tips: '获取验证码', //  验证码
				iptStyle: { //  输入框样式
					'height': '80rpx',
					background: '#fff',
					"borderRadius": "16rpx"
				},
				inputColor: '#222',
				ispwd: true,
				form: {
					mobile: null,
					password: null,
					code: null,
					inviter_code: ''
				}
			};
		},
		computed: {
			...mapState('config', {
				logo(state) {
					return state.info.appLogo
				},
				isAgreement(state) {
					return state.info.isAgreement
				},
				captchaStatus(state) {
					return !!Number(state.info.puzzleCaptcha)
				}
			})
		},
		watch: {
			isAgreement: {
				handler: function(val) {
					this.checked = val == 1 ? true : false
				},
				immediate: true
			}
		},
		onLoad({
			content
		}) {
			if (content) {
				this.form.inviter_code = content;
			} else {
				this.form.inviter_code = uni.getStorageSync("invite_code");
			}
		},
		methods: {
			...mapActions('user', ['getUserInfo']),
			checkVerifyStatus() {
				if (!this.form.mobile) {
					uni.$u.toast('请输入手机号');
					return
				} else if (this.form.mobile.length != 11) {
					uni.$u.toast('请输入11位手机号');
					return
				}
				if (this.captchaStatus) {
					this.$refs.captcha.showCaptcha();
				} else {
					this.getCode();
				}
			},
			// 获取验证码
			getCode(validate) {
				if (!this.form.mobile) {
					uni.$u.toast('请输入手机号');
					return
				} else if (this.form.mobile.length != 11) {
					uni.$u.toast('请输入11位手机号');
					return
				}
				if (this.$refs.uCode.canGetCode) {
					this.isSend = true
					uni.showLoading()
					sendSms({
						mobile: this.form.mobile,
						event: "register",
						...validate
					}).then(res => {
						this.$refs.uCode.start();
						uni.hideLoading();
					}).catch(() => {
						uni.hideLoading();
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			// 注册
			registerChange() {
				let _this = this;
				if (!this.checkForm()) return;
				uni.showLoading({
					mask: true,
					title: "注册中..."
				});
				register(this.form).then(res => {
					uni.setStorageSync('isNewUser', res.data.userinfo.is_exist == 0)
					uni.setStorage({
						key: TokenKey,
						data: res.data.userinfo.token,
						success() {
							_this.getUserInfo().then(info => {
								_this.loginSuccess(res)
							}).catch(err => {
								_this.loginSuccess(res)
							})
						}
					})
				})
			},
			loginSuccess(res) {
				uni.$emit('loginStatus', true);
				uni.showToast({
					icon: 'success',
					title: res.msg,
					success: () => {
						this.$tools.loginSuccessBack()
					}
				})
			},
			// 验证
			checkForm() {
				if (!this.checked) {
					uni.showToast({
						icon: 'none',
						title: "请先勾选用户协议"
					})
					return false;
				}
				if (!this.form.mobile) {
					uni.showToast({
						icon: 'none',
						title: "请输入手机号"
					})
					return false;
				}
				if (!this.form.code) {
					uni.showToast({
						icon: 'none',
						title: "请输入验证码"
					})
					return false;
				}
				if (!this.form.password) {
					uni.showToast({
						icon: 'none',
						title: "请输入登录密码"
					})
					return false;
				}
				if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/.test(this.form.password)) {
					uni.showToast({
						icon: 'none',
						title: "密码内需同时包含数字、字母，长度在6-12之间"
					})
					return false;
				}

				return true
			},
			goLogin(){
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss">
	page { background-color: #fff; }
	#container {
		@extend .flex, .flex-dir-col;
		position: relative;
		background-color: #fff;

		.top-img {
			margin: 0 auto;
		}
	}

	// #navbarStyle /deep/ .u-navbar__content{
	// 	background-image: url('@/static/bg/login.png');
	// 	background-position: top;
	// 	background-size: 100% auto;
	// }
	.login_center {
		width: 100%;
		padding: 32rpx;
		margin-top: 74rpx;

		>.title {
			width: 100%;
			text-align: left;
			@extend .mtb-38;
		}

		.loginInput {
			width: 100%;
			box-sizing: border-box;

			.warp {


				>.iptStyle {
					width: 100%;
					background: rgba(0, 0, 0, 0.06);
					border-radius: 16rpx;

					.u-border-bottom {
						border-color: transparent !important;
					}
				}

				>.hint {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					padding-left: 8rpx;
					@extend .font-size-12, .font-color-minor;
				}

				>.login_btn {
					width: 100%;
					margin-top: 128rpx;
					// box-shadow: 0 20rpx 30rpx rgba(223, 0, 7, .1);
				}

				>.register_btn {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					margin: 20rpx 0;
					@extend .font-size-14;
				}
			}
		}



	}

	.agreement {
		width: 100%;
		// padding: 0 50rpx 40rpx;
	}
</style>